<template>
  <div>
    <el-drawer
      v-model="props.visible"
      direction="ltr"
      size="50%"
      @close="emit('update:visible', false)"
      @closed="emit('update:visible', false)"
      @opened="onOpened"
    >
      <template #title>
        <span style="font-size: 16px; font-weight: bold">表单预览 </span>
      </template>

      <div class="app-container" v-loading="loading">
        <v-form-render
          :form-json="formJson"
          :form-data="formData"
          :option-data="optionData"
          ref="vFormRef"
        >
        </v-form-render>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, unref, nextTick, watch } from "vue";
import { useDynamicFormDesignStore } from "@/stores/dynamicFormDesign";
import formDataAdapter from "./formComponents/formDataAdapter";

const props = defineProps({
  visible: {
    default: false,
  },
  value: {
    default: () => ({
      flowVersion: 0,
      formVersion: 0,
      formDesignId: "",
      workflowId: "",
    }),
  },
  workflowValue: {
    default: () => ({}),
  },
});

const dynamicFormDesignStore = useDynamicFormDesignStore();
const emit = defineEmits(["update:visible", "closed", "update:value"]);

const loading = ref(false);

const designFramework = "vform";

const originalFormJson = JSON.stringify({
  widgetList: [],
  formConfig: {
    modelName: "formData",
    refName: "vForm",
    rulesName: "rules",
    labelWidth: 80,
    labelPosition: "left",
    size: "",
    labelAlign: "label-left-align",
    cssCode: "",
    customClass: "",
    functions: "",
    layoutType: "PC",
    jsonVersion: 3,
    onFormCreated: "",
    onFormMounted: "",
    onFormDataChange: "",
  },
});
const formJson = reactive(JSON.parse(originalFormJson));
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);

const onCancel = () => {
  emit("update:visible", false);
};

const onOpened = async () => {
  await nextTick();
  getDesign();
};

const getDesign = async () => {
  loading.value = true;
  vFormRef.value.setFormJson(JSON.parse(originalFormJson));
  const res =
  props.value.flowVersion > 0 
      ? await dynamicFormDesignStore.getFormDesignVersionByWorkflowId({
          id: props.value.workflowId,
          version: props.value.flowVersion,
        })
      : await dynamicFormDesignStore.getFormDesignVersion({
          id: props.value.formDesignId,
          version: props.value.formVersion,
        });
  if (res && res.designContent) {
    if (res.designFramework !== designFramework) {
      const jsonData = formDataAdapter.defaultToVfrom(res.designContent);
      vFormRef.value.setFormJson(jsonData);
    } else {
      vFormRef.value.setFormJson(JSON.parse(res.designContent));
    }
  }
  loading.value = false;
};
</script>

<style lang="less" scoped>
:deep(.app-container) {
  .main-container .main-header {
    display: none; //隐藏表单设计器的标题
  }
}

:deep(.no-header-dialog) {
  padding: 0px !important;
  .el-dialog__header {
    padding: 9px;
    height: 30px;
    text-align: right;
  }
  .el-dialog__body {
    width: 100%;
    height: calc(100vh - 50px) !important;
    padding: 0px !important;
  }
}
</style>
